﻿<UserControl x:Class="P2.Cuberry.Modules.Framework.WPFCharting.ChartStyling"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:datavis="clr-namespace:System.Windows.Controls.DataVisualization;assembly=System.Windows.Controls.DataVisualization.Toolkit"
    xmlns:charting="clr-namespace:System.Windows.Controls.DataVisualization.Charting;assembly=System.Windows.Controls.DataVisualization.Toolkit">
    <Grid>
        <Grid.Resources>
            <!--http://silverlight.codeplex.com/SourceControl/changeset/view/18791#507645-->
            <Style
                x:Key="MyColumnDataPointStyle"
                TargetType="charting:ColumnDataPoint">
                <Setter Property="Background" Value="Green"/>
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="charting:ColumnDataPoint">
                            <Border
                                BorderBrush="{TemplateBinding BorderBrush}"
                                BorderThickness="{TemplateBinding BorderThickness}"
                                Opacity="0"
                                x:Name="Root">
                                <VisualStateManager.VisualStateGroups>
                                    <VisualStateGroup x:Name="CommonStates">
                                        <VisualStateGroup.Transitions>
                                            <VisualTransition GeneratedDuration="0:0:0.1"/>
                                        </VisualStateGroup.Transitions>
                                        <VisualState x:Name="Normal"/>
                                        <VisualState x:Name="MouseOver">
                                            <Storyboard>
                                                <DoubleAnimation
                                                    Storyboard.TargetName="MouseOverHighlight"
                                                    Storyboard.TargetProperty="Opacity"
                                                    To="0.6"
                                                    Duration="0"/>
                                            </Storyboard>
                                        </VisualState>
                                    </VisualStateGroup>
                                    <VisualStateGroup x:Name="SelectionStates">
                                        <VisualStateGroup.Transitions>
                                            <VisualTransition GeneratedDuration="0:0:0.1"/>
                                        </VisualStateGroup.Transitions>
                                        <VisualState x:Name="Unselected"/>
                                        <VisualState x:Name="Selected">
                                            <Storyboard>
                                                <DoubleAnimation
                                                    Storyboard.TargetName="SelectionHighlight"
                                                    Storyboard.TargetProperty="Opacity"
                                                    To="0.6"
                                                    Duration="0"/>
                                            </Storyboard>
                                        </VisualState>
                                    </VisualStateGroup>
                                    <VisualStateGroup x:Name="RevealStates">
                                        <VisualStateGroup.Transitions>
                                            <VisualTransition GeneratedDuration="0:0:0.5"/>
                                        </VisualStateGroup.Transitions>
                                        <VisualState x:Name="Shown">
                                            <Storyboard>
                                                <DoubleAnimation
                                                    Storyboard.TargetName="Root"
                                                    Storyboard.TargetProperty="Opacity"
                                                    To="1"
                                                    Duration="0"/>
                                            </Storyboard>
                                        </VisualState>
                                        <VisualState x:Name="Hidden">
                                            <Storyboard>
                                                <DoubleAnimation
                                                    Storyboard.TargetName="Root"
                                                    Storyboard.TargetProperty="Opacity"
                                                    To="0"
                                                    Duration="0"/>
                                            </Storyboard>
                                        </VisualState>
                                    </VisualStateGroup>
                                </VisualStateManager.VisualStateGroups>
                                <Grid
                                    Background="{TemplateBinding Background}">
                                    <Rectangle>
                                        <Rectangle.Fill>
                                            <LinearGradientBrush>
                                                <GradientStop
                                                    Color="#77ffffff"
                                                    Offset="0"/>
                                                <GradientStop
                                                    Color="#00ffffff"
                                                    Offset="1"/>
                                            </LinearGradientBrush>
                                        </Rectangle.Fill>
                                    </Rectangle>
                                    <Border
                                        BorderBrush="#ccffffff"
                                        BorderThickness="1">
                                        <Border
                                            BorderBrush="#77ffffff"
                                            BorderThickness="1"/>
                                    </Border>
                                    <Rectangle x:Name="SelectionHighlight" Fill="Red" Opacity="0"/>
                                    <Rectangle x:Name="MouseOverHighlight" Fill="White" Opacity="0"/>
                                </Grid>
                                <ToolTipService.ToolTip>
                                    <StackPanel>
                                        <ContentControl
                                            Content="Custom ToolTip"
                                            FontWeight="Bold"/>
                                        <ContentControl
                                            Content="{TemplateBinding FormattedDependentValue}"/>
                                    </StackPanel>
                                </ToolTipService.ToolTip>
                            </Border>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>

            <!--http://silverlight.codeplex.com/SourceControl/changeset/view/18791#507651-->
            <ControlTemplate
                x:Key="MyPieDataPointTemplate"
                TargetType="charting:PieDataPoint">
                <Grid
                    x:Name="Root"
                    Opacity="0">
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="CommonStates">
                            <VisualStateGroup.Transitions>
                                <VisualTransition GeneratedDuration="0:0:0.1"/>
                            </VisualStateGroup.Transitions>
                            <VisualState x:Name="Normal"/>
                            <VisualState x:Name="MouseOver">
                                <Storyboard>
                                    <DoubleAnimation
                                        Storyboard.TargetName="MouseOverHighlight"
                                        Storyboard.TargetProperty="Opacity"
                                        To="0.6"
                                        Duration="0"/>
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                        <VisualStateGroup x:Name="SelectionStates">
                            <VisualStateGroup.Transitions>
                                <VisualTransition GeneratedDuration="0:0:0.1"/>
                            </VisualStateGroup.Transitions>
                            <VisualState x:Name="Unselected"/>
                            <VisualState x:Name="Selected">
                                <Storyboard>
                                    <DoubleAnimation
                                        Storyboard.TargetName="SelectionHighlight"
                                        Storyboard.TargetProperty="Opacity"
                                        To="0.6"
                                        Duration="0"/>
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                        <VisualStateGroup x:Name="RevealStates">
                            <VisualStateGroup.Transitions>
                                <VisualTransition GeneratedDuration="0:0:0.5"/>
                            </VisualStateGroup.Transitions>
                            <VisualState x:Name="Shown">
                                <Storyboard>
                                    <DoubleAnimation
                                        Storyboard.TargetName="Root"
                                        Storyboard.TargetProperty="Opacity"
                                        To="1"
                                        Duration="0"/>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Hidden">
                                <Storyboard>
                                    <DoubleAnimation
                                        Storyboard.TargetName="Root"
                                        Storyboard.TargetProperty="Opacity"
                                        To="0"
                                        Duration="0"/>
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                    <Path
                        x:Name="Slice"
                        Data="{TemplateBinding Geometry}"
                        Fill="{TemplateBinding Background}"
                        Stroke="{TemplateBinding BorderBrush}"
                        StrokeMiterLimit="1">
                        <ToolTipService.ToolTip>
                            <StackPanel>
                                <ContentControl
                                    Content="Custom ToolTip"
                                    FontWeight="Bold"/>
                                <ContentControl
                                    Content="{TemplateBinding FormattedDependentValue}"/>
                                <ContentControl
                                    Content="{TemplateBinding FormattedRatio}"/>
                            </StackPanel>
                        </ToolTipService.ToolTip>
                    </Path>
                    <Path
                        x:Name="SelectionHighlight"
                        Data="{TemplateBinding GeometrySelection}"
                        Fill="Red"
                        StrokeMiterLimit="1"
                        IsHitTestVisible="False"
                        Opacity="0"/>
                    <Path
                        x:Name="MouseOverHighlight"
                        Data="{TemplateBinding GeometryHighlight}"
                        Fill="White"
                        StrokeMiterLimit="1"
                        IsHitTestVisible="False"
                        Opacity="0"/>
                </Grid>
            </ControlTemplate>

            <!--http://silverlight.codeplex.com/SourceControl/changeset/view/18791#507636-->
            <datavis:StylePalette
                x:Key="MyStylePalette">
                <!--Blue-->
                <Style TargetType="Control">
                    <Setter Property="Template" Value="{StaticResource MyPieDataPointTemplate}"/>
                    <Setter Property="Background">
                        <Setter.Value>
                            <RadialGradientBrush>
                                <RadialGradientBrush.RelativeTransform>
                                    <TransformGroup>
                                        <ScaleTransform CenterX="0.5" CenterY="0.5" ScaleX="2.09" ScaleY="1.819"/>
                                        <TranslateTransform X="-0.425" Y="-0.486"/>
                                    </TransformGroup>
                                </RadialGradientBrush.RelativeTransform>
                                <GradientStop Color="#FFB9D6F7"/>
                                <GradientStop Color="#FF284B70" Offset="1"/>
                            </RadialGradientBrush>
                        </Setter.Value>
                    </Setter>
                </Style>
                <!--Red-->
                <Style TargetType="Control">
                    <Setter Property="Template" Value="{StaticResource MyPieDataPointTemplate}"/>
                    <Setter Property="Background">
                        <Setter.Value>
                            <RadialGradientBrush>
                                <RadialGradientBrush.RelativeTransform>
                                    <TransformGroup>
                                        <ScaleTransform CenterX="0.5" CenterY="0.5" ScaleX="2.09" ScaleY="1.819"/>
                                        <TranslateTransform X="-0.425" Y="-0.486"/>
                                    </TransformGroup>
                                </RadialGradientBrush.RelativeTransform>
                                <GradientStop Color="#FFFBB7B5"/>
                                <GradientStop Color="#FF702828" Offset="1"/>
                            </RadialGradientBrush>
                        </Setter.Value>
                    </Setter>
                </Style>
                <!-- Light Green -->
                <Style TargetType="Control">
                    <Setter Property="Template" Value="{StaticResource MyPieDataPointTemplate}"/>
                    <Setter Property="Background">
                        <Setter.Value>
                            <RadialGradientBrush>
                                <RadialGradientBrush.RelativeTransform>
                                    <TransformGroup>
                                        <ScaleTransform CenterX="0.5" CenterY="0.5" ScaleX="2.09" ScaleY="1.819"/>
                                        <TranslateTransform X="-0.425" Y="-0.486"/>
                                    </TransformGroup>
                                </RadialGradientBrush.RelativeTransform>
                                <GradientStop Color="#FFB8C0AC"/>
                                <GradientStop Color="#FF5F7143" Offset="1"/>
                            </RadialGradientBrush>
                        </Setter.Value>
                    </Setter>
                </Style>
                <!-- Yellow -->
                <Style TargetType="Control">
                    <Setter Property="Template" Value="{StaticResource MyPieDataPointTemplate}"/>
                    <Setter Property="Background">
                        <Setter.Value>
                            <RadialGradientBrush>
                                <RadialGradientBrush.RelativeTransform>
                                    <TransformGroup>
                                        <ScaleTransform CenterX="0.5" CenterY="0.5" ScaleX="2.09" ScaleY="1.819"/>
                                        <TranslateTransform X="-0.425" Y="-0.486"/>
                                    </TransformGroup>
                                </RadialGradientBrush.RelativeTransform>
                                <GradientStop Color="#FFFDE79C"/>
                                <GradientStop Color="#FFF6BC0C" Offset="1"/>
                            </RadialGradientBrush>
                        </Setter.Value>
                    </Setter>
                </Style>
                <!-- Indigo -->
                <Style TargetType="Control">
                    <Setter Property="Template" Value="{StaticResource MyPieDataPointTemplate}"/>
                    <Setter Property="Background">
                        <Setter.Value>
                            <RadialGradientBrush>
                                <RadialGradientBrush.RelativeTransform>
                                    <TransformGroup>
                                        <ScaleTransform CenterX="0.5" CenterY="0.5" ScaleX="2.09" ScaleY="1.819"/>
                                        <TranslateTransform X="-0.425" Y="-0.486"/>
                                    </TransformGroup>
                                </RadialGradientBrush.RelativeTransform>
                                <GradientStop Color="#FFA9A3BD"/>
                                <GradientStop Color="#FF382C6C" Offset="1"/>
                            </RadialGradientBrush>
                        </Setter.Value>
                    </Setter>
                </Style>
                <!-- Magenta -->
                <Style TargetType="Control">
                    <Setter Property="Template" Value="{StaticResource MyPieDataPointTemplate}"/>
                    <Setter Property="Background">
                        <Setter.Value>
                            <RadialGradientBrush>
                                <RadialGradientBrush.RelativeTransform>
                                    <TransformGroup>
                                        <ScaleTransform CenterX="0.5" CenterY="0.5" ScaleX="2.09" ScaleY="1.819"/>
                                        <TranslateTransform X="-0.425" Y="-0.486"/>
                                    </TransformGroup>
                                </RadialGradientBrush.RelativeTransform>
                                <GradientStop Color="#FFB1A1B1"/>
                                <GradientStop Color="#FF50224F" Offset="1"/>
                            </RadialGradientBrush>
                        </Setter.Value>
                    </Setter>
                </Style>
                <!-- Dark Green -->
                <Style TargetType="Control">
                    <Setter Property="Template" Value="{StaticResource MyPieDataPointTemplate}"/>
                    <Setter Property="Background">
                        <Setter.Value>
                            <RadialGradientBrush>
                                <RadialGradientBrush.RelativeTransform>
                                    <TransformGroup>
                                        <ScaleTransform CenterX="0.5" CenterY="0.5" ScaleX="2.09" ScaleY="1.819"/>
                                        <TranslateTransform X="-0.425" Y="-0.486"/>
                                    </TransformGroup>
                                </RadialGradientBrush.RelativeTransform>
                                <GradientStop Color="#FF9DC2B3"/>
                                <GradientStop Color="#FF1D7554" Offset="1"/>
                            </RadialGradientBrush>
                        </Setter.Value>
                    </Setter>
                </Style>
                <!--Gray Shade-->
                <Style TargetType="Control">
                    <Setter Property="Template" Value="{StaticResource MyPieDataPointTemplate}"/>
                    <Setter Property="Background">
                        <Setter.Value>
                            <RadialGradientBrush>
                                <RadialGradientBrush.RelativeTransform>
                                    <TransformGroup>
                                        <ScaleTransform CenterX="0.5" CenterY="0.5" ScaleX="2.09" ScaleY="1.819"/>
                                        <TranslateTransform X="-0.425" Y="-0.486"/>
                                    </TransformGroup>
                                </RadialGradientBrush.RelativeTransform>
                                <GradientStop Color="#FFB5B5B5"/>
                                <GradientStop Color="#FF4C4C4C" Offset="1"/>
                            </RadialGradientBrush>
                        </Setter.Value>
                    </Setter>
                </Style>
                <!--Blue-->
                <Style TargetType="Control">
                    <Setter Property="Template" Value="{StaticResource MyPieDataPointTemplate}"/>
                    <Setter Property="Background">
                        <Setter.Value>
                            <RadialGradientBrush>
                                <RadialGradientBrush.RelativeTransform>
                                    <TransformGroup>
                                        <ScaleTransform CenterX="0.5" CenterY="0.5" ScaleX="2.09" ScaleY="1.819"/>
                                        <TranslateTransform X="-0.425" Y="-0.486"/>
                                    </TransformGroup>
                                </RadialGradientBrush.RelativeTransform>
                                <GradientStop Color="#FF98C1DC"/>
                                <GradientStop Color="#FF0271AE" Offset="1"/>
                            </RadialGradientBrush>
                        </Setter.Value>
                    </Setter>
                </Style>
                <!-- Brown -->
                <Style TargetType="Control">
                    <Setter Property="Template" Value="{StaticResource MyPieDataPointTemplate}"/>
                    <Setter Property="Background">
                        <Setter.Value>
                            <RadialGradientBrush>
                                <RadialGradientBrush.RelativeTransform>
                                    <TransformGroup>
                                        <ScaleTransform CenterX="0.5" CenterY="0.5" ScaleX="2.09" ScaleY="1.819"/>
                                        <TranslateTransform X="-0.425" Y="-0.486"/>
                                    </TransformGroup>
                                </RadialGradientBrush.RelativeTransform>
                                <GradientStop Color="#FFC1C0AE"/>
                                <GradientStop Color="#FF706E41" Offset="1"/>
                            </RadialGradientBrush>
                        </Setter.Value>
                    </Setter>
                </Style>
                <!--Cyan-->
                <Style TargetType="Control">
                    <Setter Property="Template" Value="{StaticResource MyPieDataPointTemplate}"/>
                    <Setter Property="Background">
                        <Setter.Value>
                            <RadialGradientBrush>
                                <RadialGradientBrush.RelativeTransform>
                                    <TransformGroup>
                                        <ScaleTransform CenterX="0.5" CenterY="0.5" ScaleX="2.09" ScaleY="1.819"/>
                                        <TranslateTransform X="-0.425" Y="-0.486"/>
                                    </TransformGroup>
                                </RadialGradientBrush.RelativeTransform>
                                <GradientStop Color="#FFADBDC0"/>
                                <GradientStop Color="#FF446A73" Offset="1"/>
                            </RadialGradientBrush>
                        </Setter.Value>
                    </Setter>
                </Style>
                <!-- Special Blue -->
                <Style TargetType="Control">
                    <Setter Property="Template" Value="{StaticResource MyPieDataPointTemplate}"/>
                    <Setter Property="Background">
                        <Setter.Value>
                            <RadialGradientBrush>
                                <RadialGradientBrush.RelativeTransform>
                                    <TransformGroup>
                                        <ScaleTransform CenterX="0.5" CenterY="0.5" ScaleX="2.09" ScaleY="1.819"/>
                                        <TranslateTransform X="-0.425" Y="-0.486"/>
                                    </TransformGroup>
                                </RadialGradientBrush.RelativeTransform>
                                <GradientStop Color="#FF2F8CE2"/>
                                <GradientStop Color="#FF0C3E69" Offset="1"/>
                            </RadialGradientBrush>
                        </Setter.Value>
                    </Setter>
                </Style>
                <!--Gray Shade 2-->
                <Style TargetType="Control">
                    <Setter Property="Template" Value="{StaticResource MyPieDataPointTemplate}"/>
                    <Setter Property="Background">
                        <Setter.Value>
                            <RadialGradientBrush>
                                <RadialGradientBrush.RelativeTransform>
                                    <TransformGroup>
                                        <ScaleTransform CenterX="0.5" CenterY="0.5" ScaleX="2.09" ScaleY="1.819"/>
                                        <TranslateTransform X="-0.425" Y="-0.486"/>
                                    </TransformGroup>
                                </RadialGradientBrush.RelativeTransform>
                                <GradientStop Color="#FFDCDCDC"/>
                                <GradientStop Color="#FF757575" Offset="1"/>
                            </RadialGradientBrush>
                        </Setter.Value>
                    </Setter>
                </Style>
                <!--Gray Shade 3-->
                <Style TargetType="Control">
                    <Setter Property="Template" Value="{StaticResource MyPieDataPointTemplate}"/>
                    <Setter Property="Background">
                        <Setter.Value>
                            <RadialGradientBrush>
                                <RadialGradientBrush.RelativeTransform>
                                    <TransformGroup>
                                        <ScaleTransform CenterX="0.5" CenterY="0.5" ScaleX="2.09" ScaleY="1.819"/>
                                        <TranslateTransform X="-0.425" Y="-0.486"/>
                                    </TransformGroup>
                                </RadialGradientBrush.RelativeTransform>
                                <GradientStop Color="#FFF4F4F4"/>
                                <GradientStop Color="#FFB7B7B7" Offset="1"/>
                            </RadialGradientBrush>
                        </Setter.Value>
                    </Setter>
                </Style>
                <!--Gray Shade 4-->
                <Style TargetType="Control">
                    <Setter Property="Template" Value="{StaticResource MyPieDataPointTemplate}"/>
                    <Setter Property="Background">
                        <Setter.Value>
                            <RadialGradientBrush>
                                <RadialGradientBrush.RelativeTransform>
                                    <TransformGroup>
                                        <ScaleTransform CenterX="0.5" CenterY="0.5" ScaleX="2.09" ScaleY="1.819"/>
                                        <TranslateTransform X="-0.425" Y="-0.486"/>
                                    </TransformGroup>
                                </RadialGradientBrush.RelativeTransform>
                                <GradientStop Color="#FFF4F4F4"/>
                                <GradientStop Color="#FFA3A3A3" Offset="1"/>
                            </RadialGradientBrush>
                        </Setter.Value>
                    </Setter>
                </Style>
            </datavis:StylePalette>
        </Grid.Resources>

        <Grid.ColumnDefinitions>
            <ColumnDefinition/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition/>
            <RowDefinition/>
        </Grid.RowDefinitions>

        <charting:Chart
            Title="Simple Color Change"
            Grid.Column="0"
            Grid.Row="0">
            <charting:ColumnSeries
                ItemsSource="{Binding}"
                DependentValueBinding="{Binding Length}"
                IndependentValueBinding="{Binding}">
                <charting:ColumnSeries.DataPointStyle>
                    <Style TargetType="charting:ColumnDataPoint">
                        <Setter Property="Background" Value="Purple"/>
                    </Style>
                </charting:ColumnSeries.DataPointStyle>
            </charting:ColumnSeries>
        </charting:Chart>

        <charting:Chart
            Title="Custom ToolTip"
            Grid.Column="1"
            Grid.Row="0">
            <charting:ColumnSeries
                ItemsSource="{Binding}"
                DependentValueBinding="{Binding Length}"
                IndependentValueBinding="{Binding}"
                DataPointStyle="{StaticResource MyColumnDataPointStyle}"/>
        </charting:Chart>

        <charting:Chart
            Title="Simple Palette Change"
            Grid.Column="0"
            Grid.Row="1">
            <charting:PieSeries
                ItemsSource="{Binding}"
                DependentValueBinding="{Binding Length}"
                IndependentValueBinding="{Binding}">
                <charting:PieSeries.StylePalette>
                    <datavis:StylePalette>
                        <Style TargetType="charting:PieDataPoint">
                            <Setter Property="Background" Value="Red"/>
                        </Style>
                        <Style TargetType="charting:PieDataPoint">
                            <Setter Property="Background" Value="Orange"/>
                        </Style>
                        <Style TargetType="charting:PieDataPoint">
                            <Setter Property="Background" Value="Green"/>
                        </Style>
                        <Style TargetType="charting:PieDataPoint">
                            <Setter Property="Background" Value="Blue"/>
                        </Style>
                    </datavis:StylePalette>
                </charting:PieSeries.StylePalette>
            </charting:PieSeries>
        </charting:Chart>

        <charting:Chart
            Title="Custom ToolTip"
            Grid.Column="1"
            Grid.Row="1">
            <charting:PieSeries
                ItemsSource="{Binding}"
                DependentValueBinding="{Binding Length}"
                IndependentValueBinding="{Binding}"
                StylePalette="{StaticResource MyStylePalette}">
            </charting:PieSeries>
        </charting:Chart>

    </Grid>
</UserControl>
